<template>
  <view>
    <view class="template-group tn-safe-area-inset-bottom">
      <!-- 提示信息 -->
      <u-toast ref="uToast" />
      <!-- 加载动画 -->
      <u-loading-page :loading="loading" :iconSize="100" />
      <!-- 顶部自定义导航 -->
      <tn-nav-bar fixed :bottomShadow="false" :backgroundColor="navBarBackgroundColor" id="navbar" />
      <swiper class="card-swiper" :circular="true" :autoplay="true" :duration="500" :interval="10000" @change="cardSwiper">
        <swiper-item v-for="(item, index) in circleDetail.cover" :key="index" :class="cardCur == index ? 'cur' : ''">
          <view class="swiper-item image-banner">
            <image :src="item" mode="aspectFill" />
          </view>
        </swiper-item>
      </swiper>
      <!-- 头部start-->
      <view class="shop-function tn-margin-bottom-xl" :style="{ paddingTop: vuex_custom_bar_height + 'px' }">
        <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
          <view class="justify-content-item">
            <view class="tn-flex tn-flex-col-center tn-flex-row-left">
              <u-avatar :src="circleDetail.cover[0]" :size="60" />
              <view class="tn-color-white" style="width: 50vw;">
                <view class="tn-padding-right tn-padding-left-sm tn-text-xl">
                  {{ circleDetail.name }}
                </view>
                <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm tn-text-sm">
                  <text class="tn-padding-right-sm">{{ circleDetail.description }}</text>
                </view>
                <view class="tag-item" v-for="(item, index) in circleDetail.tags" :key="index">
                  <u-tag :text="`#${item}`" size="mini" :type="`${types[index]}`" shape="circle" />
                </view>
              </view>
            </view>
          </view>
          <!-- 二维码 -->
          <!-- <view class="justify-content-item tn-flex-row-center" @click="showModal">
            <view class="tn-padding-xs tn-color-white tn-round tn-shadow-blur">
              <text class="tn-icon-qr-code tn-padding-xs tn-text-xxl"></text>
            </view>
          </view> -->
        </view>
      </view>
      <!-- 头部 end-->

      <view class="group-wrap tn-bg-white" id="page_tips">
        <!-- 悬浮按钮-->
        <view class="tn-flex tn-flex-row-between" style="padding: 60rpx 0 30rpx 0;">
          <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center" v-if="!circleDetail.isJoin">
            <tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold @click="join">
              <text class="tn-icon-add tn-padding-right-xs tn-color-black"></text>
              <text class="tn-color-black">加入圈子</text>
            </tn-button>
          </view>
          <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center" v-else>
            <tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="90%" shadow fontBold @click="exit">
              <text class="tn-icon-close tn-padding-right-xs tn-color-black"></text>
              <text class="tn-color-black">退出圈子</text>
            </tn-button>
          </view>
          <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
            <tn-button backgroundColor="#FFF00D" padding="40rpx 0" width="90%" shadow fontBold open-type="share">
              <text class="tn-icon-share-triangle tn-padding-right-xs tn-color-black"></text>
              <text class="tn-color-black">分享圈子</text>
            </tn-button>
          </view>
        </view>
        <block v-if="!content.length">
          <u-empty icon="https://cdn.uviewui.com/uview/empty/data.png" :marginTop="100" />
        </block>
        <view v-else>
          <!-- 图文信息 -->
          <block v-for="(item, index) in content" :key="index">
            <view class="blogger__item" @click="clickTo(`/circle/details/details?id=${item.id}`)">
              <view class="blogger__author tn-flex tn-flex-row-between tn-flex-col-center">
                <view class="justify__author__info" @click="clickTo(`/user/personal/index?id=${item.userId}`)">
                  <view class="tn-flex tn-flex-row-center">
                    <view class="tn-flex tn-flex-row-center tn-flex-col-center">
                      <view>
                        <tn-avatar shape="circle" :src="item.avatar" size="lg"></tn-avatar>
                        <text :class="item.sex==1?'tn-icon-sex-male tn-color-blue':'tn-icon-sex-female tn-color-red'" style="position: absolute; margin-left: -12rpx; margin-top: -5rpx;"></text>
                      </view>
                      <view class="tn-padding-right tn-text-ellipsis">
                        <view class="tn-padding-right tn-padding-left-sm tn-text-lg">
                          {{ item.nickname }}
                        </view>
                        <view class="tn-padding-right tn-padding-left-sm tn-padding-top-xs tn-color-gray">
                          {{ $u.timeFrom(item.createTime) }}
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="blogger__author__btn justify-content-item tn-flex-col-center tn-flex-row-center">
                  <!-- 为什么不放关注按钮，因为快餐文化的世界，关注按钮放在外面没必要 -->
                  <text class="tn-icon-more-vertical tn-color-gray tn-text-bold tn-text-xxl"></text>
                </view>
              </view>

              <view class="blogger__desc tn-margin-top-sm tn-margin-bottom-sm tn-text-justify  tn-flex-col-center tn-flex-row-left">
                <view v-for="(tags_item, tags_index) in item.tags" :key="tags_index"
                  class="blogger__desc__label tn-float-left tn-margin-right tn-round tn-text-sm"
                  :class="tags_index == 1 ? 'tn-bg-red--light' : tags_index == 2 ? 'tn-bg-cyan--light' : 'tn-bg-blue--light'">
                  <text>#</text>
                  <text class="tn-text-df">{{ tags_item }}</text>
                </view>
                <!-- 不用限制长度了，因为发布的时候限制长度了-->
                <view v-if="!item.tags || item.tags.length < 4" class="blogger__desc__content tn-flex-1 tn-text-justify tn-text-df">{{ item.content }}</view>
              </view>

              <block v-if="item.images">
                <view v-if="[1, 2, 4].indexOf(item.images.length) != -1" class="tn-padding-top-xs">
                  <image v-for="(image_item, image_index) in item.images" :key="image_index" class="blogger__main-image"
                    :class="{
                      'blogger__main-image--1 tn-margin-bottom-sm': item.images.length === 1,
                      'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.images.length === 2 || item.images.length === 4
                    }" :src="image_item" mode="aspectFill"></image>
                </view>
                <view v-else class="tn-padding-top-xs">
                  <tn-grid hoverClass="none" :col="3">
                    <block v-for="(image_item, image_index) in item.images" :key="image_index">
                      <!-- #ifndef MP-WEIXIN -->
                      <tn-grid-item style="width: 30%;margin: 10rpx;">
                        <image class="blogger__main-image blogger__main-image--3" :src="image_item" mode="aspectFill">
                        </image>
                      </tn-grid-item>
                      <!-- #endif-->
                      <!-- #ifdef MP-WEIXIN -->
                      <tn-grid-item style="width: 30%;margin: 10rpx;">
                        <image class="blogger__main-image blogger__main-image--3" :src="image_item" mode="aspectFill">
                        </image>
                      </tn-grid-item>
                      <!-- #endif-->
                    </block>
                  </tn-grid>
                </view>
              </block>

              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xs">
                <view class="justify-content-item tn-color-gray tn-text-center">
                  <view>
                    <text class="blogger__count-icon tn-icon-eye"></text>
                    <text class="tn-padding-right">{{ item.views }}</text>
                    <text class="blogger__count-icon tn-icon-message"></text>
                    <text class="tn-padding-right">{{ item.comments }}</text>
                  </view>
                </view>
                <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view style="margin-right: 10rpx;margin-left: 20rpx;">
                    <tn-avatar-group :lists="item.likesAvatar" size="sm"></tn-avatar-group>
                  </view>
                  <text class="tn-color-gray">{{ item.likes }}人点赞</text>
                </view>
              </view>
            </view>

            <!-- 边距间隔 -->
            <view class="tn-strip-bottom" v-if="index != content.length - 1"></view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCircleDetail, joinCircle, exitCircle, circleList } from '@/api'
export default {
  name: 'Group',
  data() {
    return {
      id: null,
      loading: true,
      cardCur: 0,
      circleDetail: null,
      types: ['primary', 'success', 'error'],
      content: [],
      navBarRectInfo: {},
      navBarChangebaseLineHeight: 0,
      navBarStyle: {
        color: '#FFFFFF',
        opacity: 1,
        display: 'flex'
      },
      navBarStyle2: {
        color: 'rgba(255,255,255,0)',
        opacity: 1,
        display: 'flex'
      },
      navBarBackgroundColor: 'rgba(255, 255, 255, 0)',
    }
  },
  onLoad(e) {
    this.id = e.id;
    this.getCircleDetail(e.id);
    this.circleList();
  },
  onReady() {
    this.$nextTick(() => {
      this.initNavBarRectInfo();
    })
  },
  onPageScroll() {
    this.updateNavBarRectInfo();
  },
  // 分享
  onShareAppMessage() {
    return {
      title: this.circleDetail.name,
      imageUrl: this.circleDetail.cover[0]
    }
  },
  methods: {
    // 圈子详情
    async getCircleDetail(id) {
      const { code, message, data } = await getCircleDetail({ id });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.circleDetail = data;
    },

    // 文章列表
    async circleList() {
      const { code, message, data } = await circleList({ circleId: this.id, page: 1, size: 10 });
      this.loading = false;
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.content = data;
    },

    // 加入圈子
    async join() {
      if (!this.isLogin) {
        return uni.navigateTo({
          url: '/pages/login/login',
        });
      }
      const { code, message } = await joinCircle({ id: this.circleDetail.id });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.circleDetail.isJoin = true;
      this.$refs.uToast.show({
        type: 'success',
        message: message
      });
    },

    // 退出圈子
    async exit() {
      if (!this.isLogin) {
        return uni.navigateTo({
          url: '/pages/login/login',
        });
      }
      const { code, message } = await exitCircle({ id: this.circleDetail.id });
      if (code !== 1000) {
        return this.$refs.uToast.show({
          type: 'error',
          message: message
        });
      }
      this.circleDetail.isJoin = false;
      this.$refs.uToast.show({
        type: 'success',
        message: message
      });
    },

    // cardSwiper
    cardSwiper(e) {
      this.cardCur = e.detail.current
    },

    // 跳转
    clickTo(e) {
      uni.navigateTo({
        url: e,
      });
    },

    // 初始化导航栏信息
    async initNavBarRectInfo() {
      const navBarRectInfo = await this._tGetRect('#navbar');
      const pageTipsRectInfo = await this._tGetRect('#page_tips');
      if (!navBarRectInfo.hasOwnProperty('top') || !pageTipsRectInfo.hasOwnProperty('top')) {
        setTimeout(() => { this.initNavBarRectInfo() }, 10);
        return;
      }
      this.navBarRectInfo = { top: navBarRectInfo.top };
      this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top;
    },

    // 更新导航栏信息
    updateNavBarRectInfo() {
      this._tGetRect('#page_tips').then((res) => {
        const top = res?.top || 0;
        if (!top) return;
        const differHeight = top - this.navBarRectInfo.top;
        const opacity = differHeight / this.navBarChangebaseLineHeight;
        if (opacity < 0) {
          this.navBarStyle.color = 'rgba(0, 0, 0, ${opacity})';
          this.navBarStyle2.color = 'rgba(0, 0, 0, ${opacity})';
          this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`;
        } else {
          this.navBarStyle.color = 'rgba(255, 255, 255, 1)';
          this.navBarStyle2.color = 'rgba(255, 255, 255, 0)';
          this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`;
        }
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.tag-item {
  display: inline-block;
  margin-right: 10rpx;
}

/* 轮播视觉差 start */
.card-swiper {
  height: 650rpx !important;
}

.card-swiper swiper-item {
  width: 750rpx !important;
  left: 0rpx;
  box-sizing: border-box;
  // padding: 0rpx 30rpx 90rpx 30rpx;
  overflow: initial;
}

.card-swiper swiper-item .swiper-item {
  width: 100%;
  display: block;
  height: 100%;
  transform: scale(1);
  transition: all 0.2s ease-in 0s;
  will-change: transform;
  overflow: hidden;
}

.card-swiper swiper-item.cur .swiper-item {
  transform: none;
  transition: all 0.2s ease-in 0s;
  will-change: transform;
}

.image-banner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-banner image {
  width: 100%;
  height: 100%;
}

/* 顶部店铺 */
.shop-function {
  position: relative;
  z-index: 1;
  margin-top: -450rpx;
  padding-bottom: 20rpx;
  background-image: linear-gradient(rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.4));
}

/* 阴影 start*/
.group-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

/* 内容*/
.group-wrap {
  position: relative;
  z-index: 1;
  margin-top: -75rpx;
  margin-bottom: 40rpx;
  border-radius: 30rpx 30rpx 0 0;
}

/* 文章内容 start*/
.blogger {
  &__item {
    padding: 30rpx;
  }

  &__author {
    &__btn {
      margin-right: -12rpx;
      opacity: 0.5;
    }
  }

  &__desc {
    line-height: 40rpx;

    &__label {
      padding: 0 20rpx;
      margin: 0rpx 18rpx 0 0;

      &--prefix {
        color: #00FFC8;
        padding-right: 10rpx;
      }
    }
  }

  &__content {
    margin-top: 18rpx;
    padding-right: 18rpx;

    &__data {
      line-height: 46rpx;
      text-align: justify;
      overflow: hidden;
      transition: all 0.25s ease-in-out;
      will-change: transform;

    }

    &__status {
      margin-top: 10rpx;
      font-size: 26rpx;
      color: #82B2FF;
    }
  }

  &__main-image {
    border-radius: 16rpx;

    &--1 {
      width: 100%;
      height: 400rpx;
    }

    &--2 {
      max-width: 325rpx;
      max-height: 325rpx;
    }

    &--3 {
      height: 212rpx;
      width: 100%;
    }
  }

  &__count-icon {
    font-size: 40rpx;
    padding-right: 5rpx;
  }

  &__ad {
    width: 100%;
    height: 500rpx;
    transform: translate3d(0px, 0px, 0px) !important;

    ::v-deep .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    .uni-swiper-slide-frame {
      transform: translate3d(0px, 0px, 0px) !important;
    }

    &__item {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: left center;
      transform: translate3d(100%, 0px, 0px) scale(1) !important;
      transition: transform 0.25s ease-in-out;
      will-change: transform;
      z-index: 1;

      &--0 {
        transform: translate3d(0%, 0px, 0px) scale(1) !important;
        z-index: 4;
      }

      &--1 {
        transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
        z-index: 3;
      }

      &--2 {
        transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
        z-index: 2;
      }
    }

    &__content {
      border-radius: 40rpx;
      width: 640rpx;
      height: 500rpx;
      overflow: hidden;
    }

    &__image {
      width: 100%;
      height: 100%;
    }
  }
}

/* 文章内容 end*/

/* 间隔线 start*/
.tn-strip-bottom {
  width: 100%;
  border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
}

/* 间隔线 end*/</style>